<div class="container">
  <div class="row pt-5 pb-5">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-12 col-xl-4 col-xxl-4 col-lg-4 col-md-4 col-sm-12 mb-2">
              <span class="h3">{{ name_default }}</span>
            </div>
            <div class="col-12 col-xl-8 col-xxl-8 col-lg-8 col-md-8 col-sm-12 text-center">
              <button class="btn btn-primary btn-sm me-2" type="button" (click)="onCreate()">
                <i class="fas fa-plus"></i>
              </button>
              <button class="btn btn-primary btn-sm me-2" type="button" (click)="onUpdate()"
                [disabled]="formItem.invalid || (formItem.pristine && !item)">
                <i class="fas fa-save"></i>
              </button>
              <button class="btn btn-primary btn-sm me-2" type="button" (click)="onCopy()"
                [disabled]="formItem.invalid || (formItem.pristine && !item)">
                <i class="fas fa-copy"></i>
              </button>
              <button class="btn btn-primary btn-sm me-2" type="button" (click)="onDelete()"
                [disabled]="formItem.invalid || (formItem.pristine && !item)">
                <i class="fas fa-trash-alt"></i>
              </button>
            </div>
          </div>
          <hr>
          <form [formGroup]="formItem" class="row g-3">
            <div class="col-md-2">
              <label for="id" class="form-label">Id</label>
              <input type="text" class="form-control form-control-sm" id="id" formControlName="id" readonly>
            </div>
            <div class="col-md-4">
              <label for="name" class="form-label">Nom</label>
              <input type="text" class="form-control form-control-sm" id="name" formControlName="name">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>